/*
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-13 16:54:16
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-13 23:34:50
 * @FilePath: \cesium_visualBasic\src\3.后处理.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import * as Cesium from 'cesium'
import {
    TencentImageryProvider
} from './utils/mapPlugin'
Cesium.Ion.defaultAccessToken = window.config.token;
import * as dat from 'dat.gui'
const gui = new dat.GUI();
const viewer = new Cesium.Viewer('cesiumContainer');
//添加地图
// const tencentImageryProvider = new Cesium.UrlTemplateImageryProvider({
//     url:"https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400",
//     customTags:{
//         sx:function(imageryProvider,x,y,level){
//             return x>>4
//         },
//         sy:function(imageryProvider,x,y,level){
//             return ((1<<level) - y)>>4
//         }
//     }
// })
//使用cesium-map中provider来进行加载
const tencentImageryProvider = new TencentImageryProvider({
    style: "4",
    crs: "WGS84"
})
viewer.imageryLayers.addImageryProvider(tencentImageryProvider)
//添加白膜
const tile = new Cesium.Cesium3DTileset({
    url: "http://localhost:8080/chengdu/tileset.json"
});

const tileset = viewer.scene.primitives.add(tile);
// console.log(tileset)
tileset.readyPromise.then(() => {
    // console.log(tileset.properties)   
    //给模型着色.通过3DtilleStyle语法
    tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
            conditions: [
                ["Number(${Elevation})<50", "color('rgb(6, 202, 88)',1)"],
                ["Number(${Elevation})>50", "color('rgb(10, 125, 240)',1)"],
                ['true', 'color("blue")']
            ],
            show: false,
        },
    });
    const boundingShpere = tileset.boundingSphere;
    viewer.camera.flyToBoundingSphere(boundingShpere);
});

//
const fs = /*glsl*/ `
//官方文档报错
//v_textureCoordinates 是veryb变量 不是 in
uniform sampler2D colorTexture;
varying vec2 v_textureCoordinates;
uniform float brightness;
void main(){
    //texturea函数是webgl1.0d的规范,不是2.0规范
    vec4 color = texture2D(colorTexture,v_textureCoordinates);
    float bright = 1.0;
    //czm_frameNumber 是一个随着时间不断变大的数,比如说上一秒这值是0,下一秒就变成了60
    float iTime = czm_frameNumber/60.;
    iTime = fract(iTime);
    if(iTime > 0.5){
        bright = brightness;
    }
    //给颜色乘上浮点数相当于设置亮度
    color = color * bright;
    gl_FragColor = vec4(color.rgb,1.0);
}
`;
//我们自定义后处理效果 一明一暗
// viewer.scene.postProcessStages.add(
//     new Cesium.PostProcessStage({
//         fragmentShader:fs,
//         uniforms:{
//             brightness:1.5
//         }
//     })
// )

// //使用psLib快速完成后处理效果
// const stage = viewer.scene.postProcessStages;
// console.log("stage", stage);
// //添加一个夜市效果  本质上PostProcessStageLibrary 是帮我们使用着色器 封装了一些后处理效果
// const stageLib = new Cesium.PostProcessStageLibrary.createNightVisionStage();

// const nightVision = stage.add(stageLib);
// console.log("nightVision", nightVision);
// nightVision.enabled = true;
// //抗锯齿配置
const psLibOptions = {
    fxaa: false,
    bloom: false,
}
const stage = viewer.scene.postProcessStages;
const folderLib = gui.addFolder('内置效果')
folderLib.add(psLibOptions, 'fxaa').onChange(value => {
    // 允许开启抗锯齿,刷新网页比较
    stage.fxaa.enabled = value;

})
//大气配置
const folder = gui.addFolder('大气层')
const skyAtmosphereOpts = {
    '大气层显示': false,
    // 亮度偏移
    'brightnessShift': 0.1,
    // 色调改变
    'hueShift': 0.5,
    // 饱和度偏移
    'saturationShift': 0.1,
    // 大气层透明度
    'atmosphereLightIntensity': 20
}
folder.add(skyAtmosphereOpts, '大气层显示').onChange(value => {
    viewer.scene.skyAtmosphere.show = value; //大气层是否显示
})
folder.add(skyAtmosphereOpts, 'brightnessShift', 0, 1).onChange(value => {
    viewer.scene.skyAtmosphere.brightnessShift = value; //// 亮度偏移
})
folder.add(skyAtmosphereOpts, 'hueShift', 0, 1).onChange(value => {
    viewer.scene.skyAtmosphere.hueShift = value; //色调改变
})
folder.add(skyAtmosphereOpts, 'saturationShift', 0, 1).onChange(value => {
    viewer.scene.skyAtmosphere.saturationShift = value; //大气层是否显示
})
folder.add(skyAtmosphereOpts, 'atmosphereLightIntensity', 0, 100).onChange(value => {
    viewer.scene.skyAtmosphere.atmosphereLightIntensity = value; //大气层是否显示
})
// let entity = {}
// const loadEnt = async()=>{
//     const resource = await Cesium.IonResource.fromAssetId(360956);
//    console.log("resource",resource);
//     entity = viewer.entities.add({
//         position:Cesium.Cartesian3.fromDegrees(121.4681360921267,
//             31.162721700723694,100),
//         model:{
//             uri:resource
//         }       
//     });
//     viewer.flyto(entity);
// }

// loadEnt()
// 环境光配置
const ambientOcclusionOpts = {
    '是否开启环境光AO': false,
    '环境光强': 3,
}
//开启AO效果
const ambientOcclusion = viewer.scene.postProcessStages.ambientOcclusion;
const folderAmbient = gui.addFolder('环境光')
folderAmbient.add(ambientOcclusionOpts, '是否开启环境光AO').onChange(value => {
    ambientOcclusion.enabled = value;
    // if (value && !entity) {
    // 	loadEnt()
    // }
})
folderAmbient.add(ambientOcclusionOpts, '环境光强', 0, 10, 1).onChange(value => {
    ambientOcclusion.uniforms.intensity = value;
})

// 泛光设置
const bloomOpts = {
    '是否开启泛光效果': false,
    '泛光对比度': 128,
    '泛光亮度': 0.5,
    '泛光delta': 1,
    '泛光sigma': 2,
}
const folderBloom = gui.addFolder('泛光')
//泛光效果对全屏的泛光效果
const bloom = viewer.scene.postProcessStages.bloom;

folderBloom.add(bloomOpts, '是否开启泛光效果').onChange(value => {
    bloom.enabled = value;
})
folderBloom.add(bloomOpts, '泛光对比度', 0, 256, 32).onChange(value => {
    bloom.uniforms.contrast = value;
})
folderBloom.add(bloomOpts, '泛光亮度', 0, 1, 0.01).onChange(value => {
    bloom.uniforms.brightness = value
})
folderBloom.add(bloomOpts, '泛光delta', 0, 2, 0.1).onChange(value => {
    bloom.uniforms.delta = value;
})
folderBloom.add(bloomOpts, '泛光sigma', 0, 2, 0.1).onChange(value => {
    bloom.uniforms.sigma = value;
})
//阴影 配置

const shadowOpts = {
    "是否开启阴影": false,
    "阴影透明度": 0.4,
    "阴影大小": 2048,
    "柔和阴影": false
}
const folderShadow = gui.addFolder('阴影');
folderShadow.add(shadowOpts, '是否开启阴影').onChange(value => {
    viewer.shadowMap.enabled = value //开启阴影效果
})
folderShadow.add(shadowOpts, '阴影透明度', 0, 1).onChange(value => {
    viewer.shadowMap.darkness = value //阴影透明度--越大越透明
})
folderShadow.add(shadowOpts, '阴影大小', 1024, 4096, 1024).onChange(value => {
    viewer.shadowMap.size = value; //阴影大小，默认2048
})
folderShadow.add(shadowOpts, '柔和阴影').onChange(value => {
    viewer.shadowMap.softShadows = value;
})